<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/public.js" type="text/javascript" charset="UTF-8"></script>
	<script src="../../js/dream-msg.min.js" type="text/javascript" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="../../css/public.css">
	<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2896317_g0ffa8govn.css">
</head>

<body class="bg">
	<div class="regist-box animated fadeInDown">
		<div class="maincontent">
			<span class="regist-title">在线教汉语</span>
			<p class="title-tips">按自己的时间安排课程</p>
			<div class="text-flex">
				<div class="email-text" id="email">
					邮箱注册
					<p class="email-line-email"></p>
				</div>
				<!-- 	<div class="ml"></div>
				<div class="phone-text" id="phone">
					手机号码
					<p class="email-line-phone"></p>
				</div> -->
			</div>

			<div style="display: flex;" id="phone-show-hide">
				<div class="ph-tips to-right">+86</div>
				<div class="tips-ipt to-left">
					<input type="tel" autocomplete="off" name="" maxlength="11" id="phoneipt" class="em-ipt" value=""
						required="required" placeholder="请输入手机号码" />
				</div>
			</div>
			<div class="ipt" id="em-show-hide">
				<input type="email" autocomplete="off" name="" maxlength="20" id="emailbox" class="em-ipt" value=""
					required="required" placeholder="电子邮箱" />
			</div>

			<div style="display: flex;width: 100%;" id="yzm-show-hide">
				<div class="tips-ipt to-right">
					<input type="text" autocomplete="off" name="" id=yzm maxlength="20" class="em-ipt" value=""
						required="required" placeholder="验证码" />
				</div>
				<div class="ph-tips else to-left" id="send">发送</div>
				<div class="ph-tips else to-left" id="second"></div>
			</div>

			<div class="ipt" id="creative-show-hide">
				<input type="password" autocomplete="off" name="" maxlength="20" id="pwd" class="em-ipt" value=""
					required="required" placeholder="创建密码" />
			</div>
			<!-- 邀请码 -->
			<div class="ipt" id="creative-show-hide">
				<input type="text" autocomplete="off" name="" maxlength="20" id="invite" class="em-ipt" value=""
					required="required" placeholder="邀请码" />
			</div>
			<!-- 邀请码 -->

			<div class="rember-me">
				<input type="checkbox" name="" id="" value="" class="check-box" /> <span
					class="check-box-tips">记住我</span>
			</div>
			<div class="btn-submit" id="email-submit"><span>注册</span></div>
		</div>

		<div class="footer">
			<span>点击注册即表示您同意 Preply 的<a href="" style="color: rgba(59, 179, 189, 1);">服务条款</a>和<a href=""
					style="color: rgba(59, 179, 189, 1);">隐私政策</a></span>
		</div>

	</div>
</body>

</html>
<script type="text/javascript">



	$(function () {

		if (localStorage.getItem('iv')) {

			$('#invite').val(localStorage.getItem('iv'))
		}
	})
	// 页头生成
	// productheader('body',3);

	$(".check-box").prop('checked', true);
	// 验证码
	let ph = $('#phone');
	let em = $('#email');
	var second = 60;
	localStorage.setItem('time', second);



	$(".check-box").prop('checked', true);

	async function sendRegist() {
		//手机验证码
		if (ph.hasClass('email-text')) {
			let phone = $('#phoneipt').val();
			if (phonetest(phone)) {
				Dreamer.success("发送中,请稍后", 2000);
				$('#second').html(localStorage.getItem('time'));
				$('#send').hide();
				$('#second').show();
				let ting = setInterval(() => {
					if (localStorage.getItem('time') < 1) {
						clearInterval(ting)
						$('#send').show();
						$('#second').hide();
						second = 60;
						localStorage.removeItem('time');
						localStorage.setItem('time', second);
					} else {
						second--;
						localStorage.setItem('time', second);
						$('#second').html(localStorage.getItem('time') + 's');
					}
				}, 1000)
				let res = await ajax('verification_code', { 'phone': phone }, 'get');
			} else {
				Dreamer.error("手机号输入错误", 2000);
			}
		} else {
			//邮箱验证码
			let emailbox = $('#emailbox').val();

			console.log(emailbox)

			if (emailtest(emailbox)) {
				Dreamer.success("发送中,请稍后", 2000);
				// 执行倒计时
				$('#second').html(localStorage.getItem('time'));
				$('#send').hide();
				$('#second').show();
				let ting = setInterval(() => {
					if (localStorage.getItem('time') < 1) {
						clearInterval(ting);
						$('#send').show();
						$('#second').hide();
						second = 60;
						localStorage.removeItem('time');
						localStorage.setItem('time', second);
					} else {
						second--;
						localStorage.setItem('time', second);
						$('#second').html(localStorage.getItem('time') + 's');
					}
				}, 1000)
				let res = await ajax('sendEmail', { 'email': emailbox }, 'get');
			} else {
				Dreamer.error("邮箱输入错误", 2000);
			}
		}
	}



	$('#send').click(function () {


		throttle(sendRegist, 1500)



	})
	// 验证码

	// 注册
	$('#email-submit').click(async function () {

		let params;
		let pwd = $('#pwd').val();
		let yzm = $('#yzm').val();
		let phone = $('#phoneipt').val();
		let emailbox = $('#emailbox').val();
		let myDate = new Date();
		let times = `${myDate.getFullYear()}-${myDate.getMonth() + 1}-${myDate.getDate()} ${myDate.getHours()}:${myDate.getMinutes()}:${myDate.getSeconds()}`;
		if (ph.hasClass('email-text')) {
			if (phonetest(phone) == false) {
				Dreamer.error("请正确填写密码,至少填写6位", 2000);
			} else if (yzm.length < 4) {
				Dreamer.error("验证码至少填写4位", 2000);
			} else if (pwd.length < 6) {
				Dreamer.error("请正确填写密码,至少填写6位", 2000);
			} else {
				params = {
					'user_name': "",
					'mailbox': "",
					'password': pwd,
					'create_time': times,
					'phone': phone,
					'yzm': yzm,
					'state': 1,
				}
				let res = await ajax('phone_register', params, 'post');
				if (res.code == 200) {
					Dreamer.info("注册成功", 2000);
					if ($(".check-box").prop('checked')) {
						let temp = { 'mailbox': phone, 'password': pwd }
						localStorage.setItem('params', JSON.stringify(temp));
					} else {
						localStorage.removeItem('params');
					}
					window.location.href = '/views/teachinformationregister/teachclass.html';
				} else {

					Dreamer.error("注册失败或者已经注册过了", 2000);
				}
			}
		} else if (em.hasClass('email-text')) {
			if (emailtest(emailbox) == false) {
				Dreamer.error("请正确输入邮箱", 2000);
			} else if (yzm.length < 4) {
				Dreamer.error("验证码至少填写4位", 2000);
			} else if (pwd.length < 6) {
				Dreamer.error("请正确填写密码,至少填写6位", 2000);
			} else {


				if ($('#invite').val()) {

					params = {
						'user_name': '',
						'mailbox': emailbox,
						'password': pwd,
						'create_time': times,
						'phone': "",
						'yzm': Number(yzm),
						'state': 1,
						'invitationcode': $('#invite').val(),
					}

				} else {

					params = {
						'user_name': '',
						'mailbox': emailbox,
						'password': pwd,
						'create_time': times,
						'phone': "",
						'yzm': Number(yzm),
						'state': 1,
					}

				}
				let res = await ajax('mailbox_registration', params, 'post');
				if (res && res.code == 200) {
					Dreamer.info("注册成功", 2000);
					if ($(".check-box").prop('checked')) {
						let temp = { 'mailbox': emailbox, 'password': pwd };
						localStorage.removeItem('params');
						localStorage.setItem('params', JSON.stringify(temp));
						window.location.href = '/views/teachinformationregister/teachclass.html';
					} else {
						localStorage.removeItem('params');
					}



				} else {
					Dreamer.error("注册失败或者已经注册过了或者邀请码错误", 2000);
				}
			}
		}
	})


	$(document).ready(function () {
		$('#second').hide();
		// 默认隐藏手机号码输入框
		$('#phone-show-hide').hide();
		// 先默认显示
		let ph = $('#phone');
		let email = $('#email');
		$('.email-line-email').show();
		$('.email-line-phone').hide();
		$('#phone').click(function () {
			// 显示
			ph.removeClass('phone-text');
			ph.addClass('email-text');
			$('.email-line-phone').show();

			// 输入框切换显示
			$('#phone-show-hide').show();
			$('#yzm-show-hide').show();
			// 隐藏	
			email.removeClass('email-text');
			email.addClass('phone-text');
			$('.email-line-email').hide();
			$('#em-show-hide').hide();

		})
		$('#email').click(function () {

			// 隐藏
			email.removeClass('phone-text');
			email.addClass('email-text');
			$('.email-line-email').show();
			$('#phone-show-hide').hide();

			// 显示
			ph.removeClass('email-text');
			ph.addClass('phone-text');
			$('.email-line-phone').hide();

			// 输入框切换显示
			$('#em-show-hide').show();

		})
	});

</script>
<style type="text/css">
	.rember-me {
		width: 60%;
		margin-top: 20px;
		display: flex;
		align-items: center;
	}

	.check-box {
		width: 20px;
		height: 16px;
		border-radius: 4px;
		border: 1px solid #aab2bd;
		;
	}

	.check-box-tips {
		color: #000000;
		font-size: 12px;
		margin-left: 3%;
	}

	.header {
		background: #fff;
		width: 100%;
	}

	.btn-submit {
		color: #fff;
		width: 99.5%;
		height: 30px;
		border: 1px solid #fff;
		background-color: rgba(59, 179, 189, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		padding: 10px 0;
		margin-top: 20px;
		cursor: pointer;

	}

	.bg {
		background-color: rgba(237, 239, 240, 1);
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.regist-box {
		margin: auto;
		min-width: 20%;
		height: auto;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 6px;
		padding: 32px 36px;
		margin-top: 2%;
	}

	.maincontent {
		width: 100%;
		height: auto;
	}

	.maincontent>.regist-title {
		font-size: 28px;
		color: rgba(99, 97, 97, 1);
		font-weight: bold;
		white-space: nowrap;
		padding-bottom: 5%;
	}

	.title-tips {
		margin-top: 3%;
		white-space: nowrap;
		color: rgba(128, 128, 128, 1);
		font-size: 22px;

	}

	.text-flex {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
	}

	.email-text {
		color: rgba(0, 0, 0, 1);
		font-size: 24px;
		font-weight: normal;
		justify-content: center;
		cursor: pointer;
	}

	.email-line-email {
		width: 60%;
		height: 2px;
		background-color: rgba(42, 130, 228, 1);
		border-radius: 6px;
		margin: auto;
		margin-top: 6px;
	}

	.email-line-phone {
		width: 60%;
		height: 2px;
		background-color: rgba(42, 130, 228, 1);
		border-radius: 6px;
		margin: auto;
		margin-top: 6px;
	}

	.text-flex>.phone-text {
		color: rgba(166, 166, 166, 1);
		font-size: 14px;
		cursor: pointer;
	}

	.ml {
		margin-left: 15%;
	}

	.ipt {
		display: flex;
		border: 1px solid #d6d6d6;
		width: 99.5%;
		margin-top: 20px;
		padding: 16px 0px;
		border-radius: 4px;
	}

	.tips-ipt {
		display: flex;
		border: 1px solid #d6d6d6;
		width: 100%;
		margin-top: 20px;
		padding: 16px 0px;
		border-radius: 4px;

	}

	.ph-tips {
		width: 20%;
		border-right: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		display: flex;
		border: 1px solid #d6d6d6;
		margin-top: 20px;
		padding: 8px 8px;
		border-radius: 4px;

	}

	.to-left {
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}

	.to-right {
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}

	.else {
		background-color: rgba(59, 179, 189, 1);
		color: white;
		border-color: rgba(59, 179, 189, 1);
		cursor: pointer;
		border-right: 1px solid #fff;

	}

	.em-ipt {
		margin-left: 8px;
		display: flex;
		width: 80%;
		outline: none;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	input::-webkit-input-placeholder {
		/* placeholder颜色  */
		color: #aab2bd;
		/* placeholder字体大小  */
		font-size: 18px;
		margin-left: 8px;

	}

	.phone-header {
		background-color: #363542;
		display: flex;
		height: 100%;
		border-right: 1px solid rgba(229, 229, 229, 1);
		color: rgba(0, 0, 0, 1);
		font-size: 18px;

	}

	.footer {
		width: 100%;
		display: flex;
		justify-content: center;
		white-space: nowrap;
		text-align: center;
		margin-top: 10%;
		font-size: 14px;
	}
</style>